<template>
  <div class="jk-big-box">
    <div class="jk-box" :style="get_box_view_style()">
      <TransitionGroup name="content-swap">
        <div class="js-box-item"
          :class="[get_item_view_class(), { hover: view_index == index && videoList[index].videoUrl }]"
          v-for="(item, index) in video_list" :key="index" @click="navToClick(video_list[index])"
          @mouseenter="mouseenter(index)" @mouseleave="mouseleave">
          <h3 class="js-box-item-title">
            <ElTooltip class="box-item" effect="dark"
              :content="(video_list[index].name || '暂无数据') + (video_list[index] ? video_list[index].model || '' : '')"
              placement="top">
              <div class="text">
                {{
                  video_list[index].name || '暂无数据'
                }}
                {{ video_list[index] ? video_list[index].model || '' : '' }}
              </div>
            </ElTooltip>
            <div class="icon_box">
              <img class="icon" v-show="view_index != index || !videoList[index].id"
                src="../../../../../assets/leftbg10.png" />
              <img class="icon1" v-show="view_index == index && videoList[index].id"
                src="/static/wrjjk/dp_wrjjk_icon_x_big.png" @click="remove_video(index)" />
            </div>
          </h3>
          <div class="js-box-item-content" @dragover.prevent @drop="drop(index)">
            <div class="video" v-if="videoList[index].id" draggable="true" @dragstart="dragStart($event, index)">
              <webrtcPlayer :videoId="'videoRef' + index" :videoSrc="videoList[index].videoUrl" :controls="false"
                :isToLoading="videoList[index].status == 1" v-if="videoList[index].videoUrl"></webrtcPlayer>
            </div>
          </div>
        </div>
      </TransitionGroup>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElRow, ElCol, ElTooltip } from "element-plus";
import { ref, onMounted, onBeforeUnmount, defineProps, toRef, watch } from "vue";
import { useRouter } from "vue-router";
import { openWindow } from "@vben/utils";
import webrtcPlayer from "#/components/WebrtcPlayer.vue";

// import Hls from 'hls.js';
const props = defineProps({
  changeViewId: Number,
  viewNum: Number,
  videoList: Array,
  viewIndex: Number
});
const router = useRouter();
let video_list = toRef(props.videoList);
// if (videoList.length > props.viewNum) {
//   videoList.slice(0, props.viewNum);
// }
let players = [];
let videoRefs = ref({});
const to_video = () => {
  // for (let i in videoRefs.value) {
  //   // console.log(droneList[i].droneVideoAddress)
  //   if (players[i]) players[i].release()
  //   players[i] = new ZLMRTCClient.Endpoint({
  //     element: videoRefs.value[i],  // 绑定video元素
  //     zlmsdpUrl: droneList[i].droneVideoAddress,  // WebRTC流地址
  //     recvOnly: true,  // 纯拉流模式
  //     debug: false,  // 关闭调试日志
  //     audioEnable: true,  // 启用音频
  //     videoEnable: true   // 启用视频
  //   })
  // }
};

const getSpan = (index) => {
  switch (props.changeViewId) {
    case 1:
      return 24;
    case 2:
      return 12;
    case 3:
      return index === 0 ? 16 : 8;
    default:
      return 8;
  }
};
let hlsInstances: Record<number, Hls> = {};
const navToClick = (item) => {
  // if (item && item.status == 1) {
  //   let nav = "/dronemonitoringDetail";
  //   if (nav?.startsWith("http")) {
  //     openWindow(nav);
  //     return;
  //   }
  //   if (nav?.startsWith("/")) {
  //     router.push(nav).catch((error) => {
  //       console.error("Navigation failed:", error);
  //     });
  //   } else {
  //     console.warn(
  //       `Unknown URL for navigation item: ${nav.title} -> ${nav.url}`
  //     );
  //   }
  // }
};
onMounted(() => {
  // to_video()
  // props.droneList.forEach((item, index) => {
  //   const videoElement = document.getElementById(`video-${index}`);
  //   if (videoElement && Hls.isSupported()) {
  //     const hls = new Hls();
  //     hls.loadSource(item.streamUrl); // 假设每个无人机项都有一个 streamUrl 属性
  //     hls.attachMedia(videoElement);
  //     hls.on(Hls.Events.MANIFEST_PARSED, function () {
  //       videoElement.play();
  //     });
  //     hlsInstances[index] = hls;
  //   } else if (
  //     videoElement &&
  //     videoElement.canPlayType('application/vnd.apple.mpegurl')
  //   ) {
  //     videoElement.src = item.streamUrl; // 假设每个无人机项都有一个 streamUrl 属性
  //     videoElement.addEventListener('canplay', function () {
  //       videoElement.play();
  //     });
  //   }
  // });
});
onBeforeUnmount(() => {
  // Object.values(hlsInstances).forEach((hls) => {
  //   hls.destroy();
  // });
});
const get_box_view_style = () => {
  switch (props.viewNum) {
    case 1:
      return "";
    case 4:
      return "grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;gap: 1vh;";
    case 6:
      return "grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);gap: 0.5vh;";
    case 9:
      return "grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);gap: 0.5vh;";
    case 16:
      return "grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(4, 1fr);gap: 0.3vh;";
    case 25:
      return "grid-template-columns: repeat(5, 1fr);grid-template-rows: repeat(5, 1fr);gap: 0.3vh;";
    case 36:
      return "grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(6, 1fr);gap: 0.3vh;";
    default:
      return "";
  }
};
const get_item_view_class = () => {
  switch (props.viewNum) {
    case 1:
      return "full-box";
    case 4:
      return "four-box";
    case 6:
      return "six-box";
    case 9:
      return "nine-box";
    case 16:
      return "more16-box";
    case 25:
      return "more24-box";
    case 36:
      return "more36-box";
    default:
      return "";
  }
};


const draggedIndex = ref(null);
const draggeding = ref(false);
const dragStart = (event, index) => {
  draggeding.value = true
  draggedIndex.value = index;
};
const drop = (targetIndex) => {
  if (!draggeding.value) return
  draggeding.value = false
  if (draggedIndex.value !== targetIndex) {
    // 交换内容
    const temp = video_list.value[draggedIndex.value];
    video_list.value[draggedIndex.value] = video_list.value[targetIndex];
    video_list.value[targetIndex] = temp;
  }
  draggedIndex.value = null;
};


const remove_video = (index) => {
  video_list.value[index] = {}
}


// const view_index = toRef(props.viewIndex);
const view_index = ref();
watch(() => props.viewIndex, (a, b) => {
  view_index.value = a
})
const mouseenter = (index: number) => {
  view_index.value = index
}
const mouseleave = () => {
  view_index.value = -1
}
</script>

<style lang="scss" scoped>
.jk-big-box {
  width: 100%;
  height: 100%;

  .jk-box {
    width: 100%;
    height: 100%;
    display: grid;
    // grid-template-columns: 33% 33% 33%;
    // grid-template-rows: 33% 33% 33%;

    .js-box-item {
      // width: calc(20% - 10px);
      // height: calc(20% - 10px);
      background-color: #00292d;
      height: 100%;
      overflow: auto;

      .js-box-item-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 4vh;
        padding-left: 1.5vh;
        margin: 0;
        font-family: PingFangSC, "PingFang SC";
        font-size: 2vh;
        font-weight: 500;
        color: #fffefe;
        user-select: none;
        background: radial-gradient(ellipse 140% 300% at 100% 50%,
            rgba(0, 21, 21, 0.284) 28%,
            rgba(7, 217, 221, 0.7) 100%);

        .text {
          width: 20vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .icon {
          width: 3vh;
          margin-right: 1vw;
        }

        .icon_box {

          .icon1 {
            width: 1.5vh;
            margin-right: 1vw;
            cursor: pointer;
          }
        }

      }

      .js-box-item-content {
        height: calc(100% - 4vh);
        background-color: #333333;

        .video {
          width: 100%;
          // max-height: 50px;
          height: calc(100%);
          background-color: #000000;
          // object-fit: fill;
        }
      }

      border: 0.1vh solid transparent;
    }

    .hover {
      border: 0.1vh solid #098590;
    }

    .full-box {}

    .four-box {
      .js-box-item-title {
        font-size: 1.5vh;
        height: 3vh;
        padding-left: 1vh;

        .icon {
          width: 2vh;
        }

        .icon_box {
          .icon1 {
            margin-right: 0.8vw;
            width: 1vh;
          }
        }
      }

      .js-box-item-content {
        height: calc(100% - 3vh);
      }
    }

    .six-box {

      // grid-column: 1;
      // grid-row: 1;
      .js-box-item-title {
        font-size: 1.5vh;
        height: 3vh;
        padding-left: 1vh;

        .icon {
          width: 2vh;
        }

        .icon_box {
          .icon1 {
            margin-right: 0.8vw;
            width: 1vh;
          }
        }
      }

      .js-box-item-content {
        height: calc(100% - 3vh);
      }
    }

    .six-box:first-child {
      grid-column: 1 / span 2;
      grid-row: 1 / span 2;
    }

    .nine-box {
      .js-box-item-title {
        font-size: 1.3vh;
        height: 3vh;
        padding-left: 1vh;

        .icon {
          width: 2vh;
        }

        .icon_box {
          .icon1 {
            margin-right: 0.8vw;
            width: 1vh;
          }
        }
      }

      .js-box-item-content {
        height: calc(100% - 3vh);
      }
    }

    .more16-box {
      .js-box-item-title {
        font-size: 1vh;
        height: 2vh;
        padding-left: 0.6vh;

        .icon {
          width: 1.5vh;
        }

        .icon_box {
          .icon1 {
            width: 0.8vh;
            margin-right: 0.5vw;
          }
        }
      }

      .js-box-item-content {
        height: calc(100% - 2vh);
      }
    }

    .more24-box {
      .js-box-item-title {
        font-size: 1vh;
        height: 2vh;
        padding-left: 0.6vh;

        .icon {
          width: 1.5vh;
        }

        .icon_box {
          .icon1 {
            width: 0.8vh;
            margin-right: 0.3vw;
          }
        }
      }

      .js-box-item-content {
        height: calc(100% - 2vh);
      }
    }

    .more36-box {
      .js-box-item-title {
        font-size: 1vh;
        height: 2vh;
        padding-left: 0.6vh;

        .icon {
          width: 1.5vh;
        }

        .icon_box {
          .icon1 {
            width: 0.8vh;
            height: 0.8%;
          }
        }
      }

      .js-box-item-content {
        height: calc(100% - 2vh);
      }
    }
  }
}

.drone-list {
  position: relative;
  align-items: center;
  height: 400px;
  padding: 0 20px 0 10px;
  margin-bottom: 70px;
  border: 1px solid #fff;

  .drone-title {
    position: absolute;
    z-index: 2;
    margin-left: 70px;

    span {
      height: 52px;
      line-height: 52px;
    }

    .drone-sty {
      margin: 0 10px;
    }
  }

  .drone-title-8 {
    margin-left: 20px;
  }
}

.drone-video {
  width: 100%;
  height: 400px;
}
</style>
